<template>
	<div id="picker">
		<div class="field-box">
			<el-scrollbar class="right-scrollbar">
				<!-- 组件属性 -->
				<el-form size="small" label-width="90px">
					<el-form-item label="字段名">
						<el-input placeholder="请输入字段名（v-model）" />
					</el-form-item>
					<el-form-item label="组件名">

					</el-form-item>

					<el-form-item label="拾取页面元素">
						<el-button type="primary" @click="pickElement">拾取</el-button>
					</el-form-item>
					<el-form-item label="操作界面">

					</el-form-item>
					<el-form-item label="元素Xpath">
						<el-input disabled />
					</el-form-item>
					<el-form-item label="元素截图">
						<img :src="'http://localhost:10988'" alt="">
					</el-form-item>
					<el-form-item label="拾取页面元素">
						<el-button type="primary" @click="()=>{emits('setActiveData',activeData)}">验证</el-button>
					</el-form-item>
				</el-form>

			</el-scrollbar>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { ActiveData } from '../right-form/types';
let socket: WebSocket | null = null;
const path: string = "ws://localhost:10988/socket/picker";
const activeData: ActiveData = reactive({
	pickerImg: '',
	xpath: '',
	pickerType: '',
});
const emits = defineEmits<{(event:'setActiveData',name:ActiveData):void}>()
const pickElement = () => {
	if (typeof (WebSocket) === "undefined") {
		alert("您的浏览器不支持socket")
	} else {
		// 实例化socket
		socket = new WebSocket(path)
		// 监听socket连接
		socket.onopen = open
		// 监听socket错误信息
		socket.onerror = error
		// 监听socket消息
		socket.onmessage = getMessage
	}
};
const open = () => {
	console.log("socket连接成功")
	send('测试链接')
};
const error = () => {
	console.log("连接错误")
};
const getMessage = (msg: any) => {

};
// 发送消息给被连接的服务端
const send = (params: any) => {
	if (socket) socket.send(params);
	console.log("socket连接失败")
};
</script>

<style scoped></style>
